import React from 'react'
import {withRouter} from 'react-router-dom';
import { Select,Input,Button,Pagination,Checkbox,Modal   } from 'antd';
import {Table } from 'react-bootstrap'
import styles from '../../css/categoryTable.module.scss'
const Option = Select.Option;
const confirm = Modal.confirm;





export default class CategoryTable extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tableData:[],//后台返回的数据存储地方
            nowPage:parseInt(props.match.params.page)||1, //当前页码
            pageSize:12, //一页显示12条数据
            total:0,  //总共多少条数据
            searchName:'',
            searchIsShow:''

        }
    }
    componentWillMount(){
       this.getTableData()
    }
    //search(page)搜索   传参   getTableData 不传参
    getTableData=()=>{
        let self = this;
        let url='/category/all?page='+this.state.nowPage+'&size='+self.state.pageSize;
        fetch(url,{
            method:'POST',
            body: JSON.stringify({}),  //传递给后台的 ，所以这儿的对象与tableData不能混为一谈；请求体传递的是字符串
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(response=>response.json())  //返回一个promise对象，可以解析成json对象
        .then(data=>{
            self.setState({
                tableData:data.data,
                total:data.count,
            })
        })
    }
    changeName=(e)=>{      //出现了 在输入框 输入文字，无法下上去---没有使用驼峰命名
        this.setState({
            searchName:e.target.value
        },function () {
            console.log(this.state.searchName)
        })
    }
    searchSelect=(value)=>{
       this.setState({
           searchIsShow:value
       })
    }
    render() {
        return <div className={styles.container}>
            <div className={styles.handleBox}>
                <Select placeholder="是否显示" allowClear={true} className={styles.selectBox}
                        size="large" onChange={this.searchSelect} value={this.state.searchIsShow}>
                    <Option value={'1'}>是</Option>
                    <Option value={'0'}>否</Option>
                </Select>
                <Input value={this.state.searchName} onChange={this.changeName} placeholder="请输入分类名称" allowClear={true} className={styles.inputBox} size="large" />
                <Button type="primary" style={{marginLeft:"20px"}} onClick={this.search} size='large'>搜索</Button>
            </div>
            <Table responsive bordered={true} size="md">
                <thead>
                <tr>
                    <th>
                        <Checkbox></Checkbox>
                    </th>
                    <th>序号</th>
                    <th>分类名称</th>
                    <th>叶子节点</th>
                    <th>是否显示</th>
                    <th>父类名称</th>
                    <th>操作</th>
                </tr>
                </thead>
                {this.state.tableData.map(item=>{
                    return    <tbody>
                    <tr>
                        <td>
                            <Checkbox></Checkbox>
                        </td>
                        <td>{item.orderBy}</td>
                        <td>{item.name}</td>
                        <td>{item.isLeaf==='1' ? '是':'否'}</td>
                        <td>{item.isShow==='1' ? '是':'否'}</td>
                        <td>{item.parentName===''?'-':item.parentName}</td>
                        <td>
                            <Button type="primary" onClick={this.handleEdit.bind(this,item.id)}>编辑</Button>
                            <Button  type="danger" onClick={this.handleDelete.bind(this,item.id)} style={{marginLeft:15}}>删除</Button>
                        </td>
                    </tr>
                    </tbody>
                })}
            </Table>
            <Pagination defaultCurrent={this.state.nowPage} pageSize={this.state.pageSize} total={this.state.total} onChange={this.pageChanged} />
        </div>
    }
//    分页跳转 分页本质：告诉后端，要请求是哪页。需要传入page
    pageChanged=(page)=>{
        this.state.nowPage=page;
        this.search()
        // console.log(this.props)
    }
    //事件中绑定this并传参  onClick={this.del.bind(this,'参数')----在里面打印this.props看值} item.id
    handleDelete=(id)=>{
        let self=this;
        confirm({
            title: '删除信息',
            content: '删除不可恢复，确定要删除？',
            onOk() {
                 //搜索fetch delete用法
                fetch('/category?id='+id,{
                    method:'DELETE',
                    body: JSON.stringify({}),  //传递给后台的 ，所以这儿的对象与tableData不能混为一谈；请求体传递的是字符串
                    headers: {
                        'Content-Type': 'application/json'
                    },
                })
                    .then(response=>response.json())  //返回一个promise对象，可以解析成json对象
                    .then(data=>{
                            alert('删除成功');
                            self.getTableData();
                        // console.log(data)  //-----打印出来 data是删除的数据。data:null
                    })
                return
            },
            onCancel() {
                alert('删除取消~~~')
            },
        });
    }

    编辑
    handleEdit=(id)=>{
        this.props.history.push('/categoryEdit/'+id)
    }
    search=()=>{
        let self = this;
        let url='/category/all?page='+this.state.nowPage+'&size='+self.state.pageSize;
        fetch(url,{
            method:'POST',
            body: JSON.stringify({
                isShow:this.state.searchIsShow,
                name:this.state.searchName
            }),
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response=>response.json())
            .then(data=>{
                self.setState({
                    tableData:data.data,
                    total:data.count,
                })
            })
    }
}
// 分页 排序 按钮
//新增页面---from表单
// 上传git